import React from 'react';
import {cn} from '@/lib/utils';

// 头像尺寸类型
type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';

// 头像属性接口
interface AvatarProps {
    // 头像文本内容（通常是用户名缩写）
    children: React.ReactNode;
    // 头像尺寸
    size?: AvatarSize;
    // 背景颜色类名
    className?: string;
    // 点击事件处理
    onClick?: () => void;
}

// 尺寸样式映射
const sizeClasses: Record<AvatarSize, string> = {
    sm: 'w-6 h-6 text-xs',
    md: 'w-8 h-8 text-xs',
    lg: 'w-10 h-10 text-sm',
    xl: 'w-12 h-12 text-base',
};

/**
 * 头像组件
 * 用于显示用户头像或文本头像，支持多种尺寸和自定义样式
 *
 * @example
 * // 基础用法
 * &lt;Avatar&gt;WO&lt;/Avatar&gt;
 *
 * // 自定义样式和尺寸
 * &lt;Avatar size="lg" className="bg-blue-800 text-white"&gt;CO&lt;/Avatar&gt;
 *
 * // 可点击头像
 * &lt;Avatar onClick={() =&gt; console.debug('clicked')}&gt;+&lt;/Avatar&gt;
 */
export const Avatar: React.FC<AvatarProps> = ({
    children,
    size = 'md',
    className,
    onClick,
}) => {
    return (
        // 头像容器：圆形、居中文本、支持点击
        <div
            className={cn(
                // 基础样式：圆形容器，居中对齐
                'rounded-full flex items-center justify-center font-semibold',
                // 尺寸样式
                sizeClasses[size],
                // 点击态样式
                onClick && 'cursor-pointer hover:opacity-80 transition-opacity',
                // 自定义样式
                className
            )}
            onClick={onClick}
            role={onClick ? 'button' : undefined}
            tabIndex={onClick ? 0 : undefined}
        >
            {children}
        </div>
    );
};
